<template>
  <div style="position: relative">
    <div
      v-if="showBg"
      class="subject-bg"
      :style="{ backgroundColor: module.props.bgColor }"
    ></div>

    <!-- 标题行 -->
    <div
      class="subject-selector"
      :style="{
        backgroundColor: '#F2F6FC',
        color: module.props.textColor,
        fontSize: module.props.fontSize,
        padding: module.props.padding,
        height: computedHeight,
        lineHeight: computedHeight,
      }"
    >
      <span
        v-for="(item, idx) in module.props.subjects"
        :key="idx"
        @click="changeBackgroundColor(item)"
        class="subject-item"
      >
        {{ item }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "SubjectSelectorModule",
  props: ["module"],
  data() {
    return {
      showBg: true,
    };
  },
  methods: {
    changeBackgroundColor(subject) {
      const colorMap = {
        语文: "#ffecec",
        数学: "#ecf7ff",
        英语: "#eaffec",
      };
      const newColor = colorMap[subject] || "#f5f5f5";
      const updatedModule = {
        ...this.module,
        props: {
          ...this.module.props,
          bgColor: newColor,
        },
      };
      console.log("切换背景色并同步:", newColor);
      this.$emit("update-module", updatedModule);
      this.$emit("sync-search-bg", newColor); // 新增：通知父组件同步 Search 的背景色
      this.$emit("sync-banner-bg", newColor);
    },
  },
  computed: {
  computedHeight() {
    // 假设字体大小是字符串 "16px" 形式，提取数字
    const fontSize = parseFloat(this.module.props.fontSize) || 16;
    // 高度设置为字体大小的2.5倍，单位为px
    return fontSize * 2.5 + "px";
  },
},

};
</script>

<style scoped>
.subject-selector {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  z-index: 2;
  position: relative; /* 确保标题行在背景上层 */
  background-color: #fff;
  /* 设置标题行高度，方便背景定位 */
  height: 50px; /* 你可以根据实际调整 */
  line-height: 50px;
  padding: 0 16px; /* 跟 JS 中的 padding 保持一致 */
}

.subject-item {
  margin: 0 12px;
  cursor: pointer;
}
</style>
